<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" id="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
    <title>播放页面</title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/playVideo.css">
    <style>
        .screen-change {
            position: absolute !important;
            left: 50% !important;
            top: 50% !important;
            overflow: hidden !important;
            z-index: 10 !important
        }

        .screen-change.w {
            height: 100vw;
            width: 100vh;
            transform: translate(-50%, -50%) rotate(90deg);
            -webkit-transform: translate(-50%, -50%) rotate(90deg);
        }

        .screen-change.h {
            height: 100vh;
            width: 100vw;
            transform: translate(-50%, -50%);
            -webkit-transform: translate(-50%, -50%);
        }

        .screen-change.W {
            height: 100vw !important;
            width: 100vh !important;
            transform: translate(-50%, -50%);
            -webkit-transform: translate(-50%, -50%);
        }

        .screen-change.H {
            height: 100vh !important;
            width: 100vw !important;
            transform: translate(-50%, -50%);
            -webkit-transform: translate(-50%, -50%);
        }
    </style>
</head>

<body>
    <script>
        // var el = document.documentElement; //<html></html>元素
        // var rfs = el.requestFullScreen || el.webkitRequestFullScreen || el.mozRequestFullScreen || el
        //     .msRequestFullScreen; //全屏得方法sessionStorage
        // rfs.call(el);
        /** 手机端自动横屏 */
        ! function () {
            var viewport = document.getElementById('viewport');
            var dw = null;
            var screenChange = document.getElementsByClassName('screen-change');

            function a() {
                if (document.body.clientHeight > document.body.clientWidth) {
                    dw = 750; //页面的高度
                    screenChange[0].classList.remove('h');
                    screenChange[0].classList.add('w');

                } else if (document.body.clientHeight < document.body.clientWidth) {
                    dw = 1334; //页面的宽度
                }
                viewport.setAttribute('content', 'width=' + dw + ', user-scalable=no')
            }
            a();
            window.addEventListener("orientationchange", function () {
                if (window.orientation == 0) {
                    screenChange[0].classList.remove('h');
                    screenChange[0].classList.add('w');

                    dw = 750; //页面的高度
                    viewport.setAttribute('content', 'width=' + dw + ', user-scalable=no')
                } else if (window.orientation == 90) {
                    screenChange[0].classList.remove('w');
                    screenChange[0].classList.add('h');
                    dw = 1334; //页面的宽度
                    viewport.setAttribute('content', 'width=' + dw + ', user-scalable=no')
                }
            }, false);
        }(window);
    </script>
    <div id="contentBox" class="w screen-change">
        <video src="http://video.mxiaotu.com/sv/11591e3e-176f05d2122/11591e3e-176f05d2122.mp4" preload='auto' id='video'
            webkit-playsinline='true' playsinline='true' x-webkit-airplay='true' x5-video-player-type='h5'
            x5-video-player-fullscreen='false' x5-video-ignore-metadata='true'></video>
        <section>
            <div id="topOpt" class="opts">
                <div id="reback">
                </div>
            </div>
            <div id="botOpt" class="opts">
                <div id="isplay"></div>
                <div id="currenTime">
                    <!-- 视频已播放的时间 -->
                    00:00
                </div>
                <div id="progress">
                    <!-- 视频进度条-->
                    <div>
                    </div>
                </div>
                <div id="endTime">
                    00:00
                    <!-- 视频总时长-->
                </div>
            </div>
        </section>
    </div>
    <script src="./js/jq.min.js"></script>
    <script src="./js/playVideo.js "></script>
</body>

</html>